<template>
    <div class="addMyAddress">
         <!-- 顶部 -->
       <div class="addressHeader">
            <div @click="$router.go(-1)" class="header-left vip-icon icon-back"></div>
            <div class="header-middle">新增地址</div>
            <router-link to="/home" tag="div" class="header-right vip-icon icon-home"></router-link>
       </div>
       <!-- 收货地址添加 -->
       <div class="addressContent"></div>
       <van-address-edit
          :area-list="areaList"
          show-postal
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @change-detail="onChangeDetail"
        />
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
    export default {
        name:"addMyAddressView",
        data() {
          return {
            areaList,  //省市县地址信息
            searchResult: [],  //详情地址 搜索地址信息
            addressList:[]  //保存地址信息
          };
        },
  methods: {
    // 保存地址方法
    onSave(content) {
      this.$toast('保存成功');
      console.log(content);
     //   当前地址信息保存进去地址数组
      
    //   if(this.addressList.length > 0){
    //     let index = this.addressList.findIndex(item => item.addressDetail === content.addressDetail);
    //         if(index != -1){
    //             this.addressList.push(content);
    //         }else{
    //             this.$toast.fail("不能重复信息哦")
    //         }
    //     }else{
    //        this.addressList.push(content);
    //     }
        this.addressList.push(content);
        window.localStorage.setItem("address",JSON.stringify(this.addressList));
        this.$router.push("/myAddress");
    },
    
    // 详情地址搜索信息
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '粤嵌科技',
            address: '鳌头镇城鳌大道999号',
          },
          {
            name: '广州软件学院',
            address: '太平镇广从南路548号',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    },
    created(){
        if(window.localStorage.getItem("address")){
            this.addressList = JSON.parse(window.localStorage.getItem("address"));
        }
    }
}
</script>

<style lang="scss" scoped>
.addMyAddress{
    background-color: #f3f4f5;
    height: 100%;
    .addressHeader{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e1e1e1;
        background-color: #fff;
        .header-left{
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 20px;
        }

        .header-middle{
            text-align: center;
            line-height: 44px;
            font-size: 18px;
            flex: 1;
        }
        .header-right{
            font-size: 20px;
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
    }
}
</style>